<template>
  <div>
    <van-tabs v-model="active" color="#07c160" background="#48D1CC">
      <van-tab title="Login">
        <InputInfo class="InputInfo" @Event="parentGetInfo"></InputInfo>
        <van-switch v-model="checked" size="21px" active-color="#07c160" inactive-color="#f44" />
        <van-button type="primary" size="large" @click="doLogin" :loading="loading">Login</van-button>
        <span class="spanr" @click="switchPage(1)">not have an account？click here</span>
      </van-tab>
      <van-tab title="Register">
        <InputInfo class="InputInfo" @Event="parentGetInfo"></InputInfo>
        <van-button type="info" size="large" @click="doRegister" :loading="loading">Register</van-button>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import InputInfo from '@/components/LRInfoInput.vue'
export default {
  name: 'Login',
  data () {
    return {
      tele: null,
      pass: null,
      loading: false,
      active: 0,
      checked: true
    }
  },
  components: {
    InputInfo
  },
  methods: {
    parentGetInfo (info) {
      this.tele = info.tele
      this.pass = info.pass
    },
    doLogin () {
      // TODO: 注释掉
      // sessionStorage.sessionid = '0o3kgncdhsbbol76e08sc5ise6'
      // this.$root.$router.push('/home')
      if (this.pass != null && this.tele != null) {
        this.loading = true
        // console.log('this.pass.length :', this.pass.length >= 6)
        // console.log('this.tele.length==11 :', this.tele.length == 11)
        if (this.tele.length === 11 && this.pass.length >= 6) {
          this.$axios.get('/api/login', {
            params: {
              tel: this.tele,
              password: this.pass
            }
          }).then(response => {
            // console.log(isUndefined(response.data.error))
            if (typeof (response.data.error) === 'undefined') {
              // 登录成功 没出任何错误
              sessionStorage.sessionid = response.data.sessionid
              sessionStorage.userid = response.data.id
              sessionStorage.username = response.data.user_name
              this.$toast.success('LoginSuccess')
              this.loading = false
              this.$root.$router.push('/home')
            } else {
              // 登录失败 但是是账户名和密码错误
              this.loading = false
              console.log('response.data :', response.data.error)
              this.$toast.fail(response.data.error)
            }
          }).catch(error => {
            // console.log('error :', error);
            this.loading = false
            this.$toast(error)
          })
        } else {
          this.loading = false
          this.$notify({
            message: 'tele or password format is wrong',
            duration: 1000
          })
        }
      } else {
        this.$notify({
          message: 'please input tele or password',
          duration: 1000
        })
      }
    },
    doRegister () {
      if (this.pass != null && this.tele != null) {
        this.loading = true
        if (this.tele.length === 11 && this.pass.length >= 6) {
          this.$axios.get('/api/reg', {
            params: {
              tel: this.tele,
              password: this.pass
            }
          }).then(response => {
            if (typeof (response.data.error) === 'undefined') {
              setTimeout(() => {
                this.loading = false
                this.$toast('Register success')
                this.switchPage(0)
              }, 1000)
              // TODO: 跳转
            } else {
              this.$toast(response.data.error)
            }
          }).catch(error => {
            console.log(error)
            this.loading = false
          })
        } else {
          this.$notify({
            message: 'tele or password format is wrong',
            duration: 1500
          })
        }
      }
    },
    switchPage (page) {
      this.active = page
    }
  }
}
</script>

<style scoped>
.InputInfo {
  margin-top: 35%;
}
.van-button {
  margin-top: 50px;
  margin-bottom: 20px;
}
.spanr {
  margin-left: 15%;
}
.van-switch{
    position: absolute;
    right: 10%;
    margin-top: 10px;
}
</style>
